<template>
  <div class="followup_page">
    <!-- 客户资料 开始 -->
    <div class="base_info">
      <div class="base_left">
        <div class="base_top">
          <div class="name_top_box">
            <!-- 姓名、头像 开始 -->
            <div class="name_box">
              <div class="city">
                <span>{{
                  selectItem.city && selectItem.city.length > 2
                    ? selectItem.city.slice(0, 2)
                    : selectItem.city
                }}</span>
              </div>
              <div class="">
                <div class="name">
                  <span>{{ selectItem.name }}</span>
                  <img
                    src="@/assets/images/male.png"
                    alt=""
                    v-if="selectItem.gender == '男' || selectItem.gender == 1"
                  />
                  <img
                    src="@/assets/images/female.png"
                    alt=""
                    v-else-if="
                      selectItem.gender == '女' || selectItem.gender == 2
                    "
                  />
                  <img src="@/assets/images/unknown.png" alt="" v-else />
                  <el-button
                    type="primary"
                    size="mini"
                    class="btn"
                    @click="lockUser(selectItem)"
                    >{{ selectItem.lock == 1 ? "取消锁定" : "锁定" }}</el-button
                  >
                </div>
                <div class="mobile">
                  {{ selectItem.mobile }}

                  <!-- <i class="el-icon-mobile-phone" style="color:#f00;cursor: pointer;font-size:14px;"></i> -->
                </div>
                <div class="counselor">
                  <span class="pre">持有人：</span>
                  <div class="txt">
                    <span class="name">{{
                      selectItem.employee ? selectItem.employee.name : ""
                    }}</span>
                  </div>
                </div>
              </div>
              <!-- 姓名、头像 end -->
            </div>
            <div class="link_box">
              <el-button
                type="primary"
                class="btn"
                size="small"
                :disabled="isFirstCustomer()"
                @click="lookPrevCustomer()"
                >上一个客户</el-button
              >
              <el-button
                type="primary"
                class="btn"
                size="small"
                :disabled="isLastCustomer()"
                @click="lookNextCustomer()"
                >下一个客户</el-button
              >
            </div>
          </div>

          <!-- 右侧信息 开始 -->
          <div class="user_info new_user_info">
            <div class="right_btn">
              <el-button
                type="primary"
                size="mini"
                @click="callPhone(selectItem)"
                >一键拨号</el-button
              >
              <el-button type="primary" size="mini" @click="goSign(0)"
                >签约</el-button
              >
              <el-button
                type="primary"
                size="mini"
                @click="goFollow(selectItem)"
                >进件</el-button
              >
              <el-button type="primary" size="mini" @click="joininPublicPool"
                >加入公共池</el-button
              >
              <el-button type="primary" size="small" @click="openBookDialog()"
                >预约跟进</el-button
              >
            </div>
            <div class="left_info">
              <div class="static_info">
                <div class="cell">
                  <span class="pre">入库时间：</span>
                  <div class="txt">{{ selectItem.createDate }}</div>
                </div>
                <div class="cell">
                  <span class="pre">分配时间：</span>
                  <div class="txt">{{ selectItem.distributeDate }}</div>
                </div>
                <div class="cell">
                  <span class="pre">最后跟进时间：</span>
                  <div class="txt">{{ selectItem.updateDate }}</div>
                </div>
                <div class="cell">
                  <span class="pre">需求金额：</span>
                  <div class="txt">{{ selectItem.need || "0.00" }}</div>
                </div>
                <div class="cell">
                  <span class="pre">签约额度：</span>
                  <div class="txt">
                    {{ selectItem.contractAmount || "0.00" }}
                  </div>
                </div>
                <div class="cell">
                  <span class="pre">在审件金额：</span>
                  <div class="txt">{{ selectItem.importAmount || "0.00" }}</div>
                </div>
                <!-- <div class="cell">
                  <span class="pre">在审件佣金：</span>
                  <div class="txt">{{selectItem.importBrokerage||'0.00'}}</div>
                </div> -->
              </div>
              <div class="cell">
                <span class="pre">客户星级：</span>
                <div class="txt">
                  <el-tag
                    size="small"
                    class="el_tag"
                    v-for="(item, index) in checkList"
                    :key="index"
                    >{{ item.name }}</el-tag
                  >
                  <el-tag
                    size="small"
                    class="el_tag"
                    type="primary"
                    effect="dark"
                    @click="openTagDialog()"
                    >+设置星级</el-tag
                  >
                </div>
              </div>
            </div>
          </div>
          <!-- 右侧信息 end -->
        </div>

        <!-- <div class="static_info">

        </div> -->

        <!-- 客户状态 开始 -->
        <div class="steps_box">
          <el-steps
            :active="Number(selectItem.progress)"
            finish-status="success"
          >
            <el-step
              v-for="(item, index) in statusList"
              :key="index"
              :title="item.desc"
              @click.native="editProgress(item)"
            ></el-step>
          </el-steps>
        </div>
        <!-- 客户状态 end -->
      </div>
    </div>
    <!-- 客户资料 end -->

    <div class="el_tabs_box">
      <div class="base_info_box">
        <el-tabs v-model="activeName">
          <!-- 基本资料 开始 -->
          <el-tab-pane label="基本资料" name="1">
            <el-form
              class="el_form"
              :model="selectItem"
              size="small"
              label-width="120px"
            >
              <div class="first_line">
                <el-form-item label="姓名：">
                  <el-input
                    v-model="selectItem.name"
                    placeholder="请输入姓名"
                  ></el-input>
                </el-form-item>
                <el-form-item label="性别：">
                  <!-- <span>{{showFollowProcess(selectItem.progress)}}</span> -->
                  <el-select v-model="selectItem.sex" placeholder="请选择状态">
                    <el-option label="男" :value="1" />
                    <el-option label="女" :value="2" />
                  </el-select>
                </el-form-item>
                <el-form-item label="城市：">
                  <city-select v-model="selectItem.city"></city-select>
                </el-form-item>
                <el-form-item label="状态：">
                  <el-select
                    v-model="selectItem.progress"
                    placeholder="请选择状态"
                  >
                    <el-option
                      v-for="(item, index) in statusList"
                      :key="index"
                      :label="item.desc"
                      :value="item.status"
                    />
                  </el-select>
                </el-form-item>
              </div>
              <el-form-item
                v-for="(item, fieldIndex) in fieldList"
                :key="fieldIndex"
                :label="`${item.fieldName}：`"
              >
                <template v-if="item.type === 2">
                  <el-select
                    v-model="selectItem[item.fieldCode.replace('_','')]"
                    clearable
                    :placeholder="item.fieldName"
                  >
                    <el-option
                      v-for="kitem in item.value"
                      :key="kitem"
                      :label="kitem"
                      :value="kitem"
                    />
                  </el-select>
                </template>
                <template v-else>
                  <el-input
                    v-model="item.value1"
                    :placeholder="item.fieldName"
                  ></el-input>
                </template>
              </el-form-item>
              <el-form-item label="客户条件" class="el_long">
                <el-input
                  type="textarea"
                  :rows="5"
                  :resize="inputResize"
                  v-model="selectItem.remark"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!-- 基本资料 end -->

          <!-- 客户跟进资料 开始 -->
          <el-tab-pane label="客户附件管理" name="3">
            <el-form class="el_form" :model="selectItem" label-width="120px">
              <el-form-item label="上传跟进资料" class="el_long">
                <div class="upload_box">
                  <div class="image_cell">
                    <el-upload
                      class="avatar-uploader"
                      :action="UPLOADFILEPATH"
                      :show-file-list="false"
                      :on-success="
                        (response) => onSuccess(response, 'idcardFront')
                      "
                    >
                      <img
                        v-if="selectItem.idcardFront"
                        :src="selectItem.idcardFront"
                        class="avatar"
                      />
                      <div class="upload_tips" v-else>
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                        <span>上传身份证正面</span>
                      </div>
                    </el-upload>
                    <span class="name">身份证正面</span>
                  </div>
                  <div class="image_cell">
                    <el-upload
                      class="avatar-uploader"
                      :action="UPLOADFILEPATH"
                      :show-file-list="false"
                      :on-success="
                        (response) => onSuccess(response, 'idcardBack')
                      "
                    >
                      <img
                        v-if="selectItem.idcardBack"
                        :src="selectItem.idcardBack"
                        class="avatar"
                      />
                      <div class="upload_tips" v-else>
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                        <span>上传身份证反面</span>
                      </div>
                    </el-upload>
                    <span class="name">身份证反面</span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="必备资料" class="el_long">
                <div class="upload_box">
                  <div class="image_cell">
                    <el-upload
                      class="avatar-uploader"
                      :action="UPLOADFILEPATH"
                      :show-file-list="false"
                      :on-success="
                        (response) => onSuccess(response, 'authorizeFile')
                      "
                    >
                      <img
                        v-if="selectItem.authorizeFile"
                        :src="selectItem.authorizeFile"
                        class="avatar"
                      />
                      <div class="upload_tips" v-else>
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                        <span>上传授权书</span>
                      </div>
                    </el-upload>
                    <span class="name">授权书</span>
                  </div>
                  <div class="image_cell">
                    <el-upload
                      class="avatar-uploader"
                      :action="UPLOADFILEPATH"
                      :show-file-list="false"
                      :on-success="
                        (response) => onSuccess(response, 'creditFile')
                      "
                    >
                      <img
                        v-if="selectItem.creditFile"
                        :src="selectItem.creditFile"
                        class="avatar"
                      />
                      <div class="upload_tips" v-else>
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                        <span>上传征信报告</span>
                      </div>
                    </el-upload>
                    <span class="name">征信报告</span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="其他资料" class="el_long">
                <div class="upload_box">
                  <el-upload
                    class="avatar-uploader"
                    :action="UPLOADFILEPATH"
                    list-type="picture-card"
                    :file-list="otherFile"
                    :on-success="onFileSucess"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </div>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!-- 客户跟进资料 end -->

          <!-- 签约产品 开始 -->
          <el-tab-pane label="签约产品" name="4">
            <el-table :data="selectItem.productList" border size="small">
              <el-table-column label="id" prop="productId"></el-table-column>
              <el-table-column
                label="产品"
                prop="productName"
              ></el-table-column>
              <el-table-column label="备注" prop="remark"></el-table-column>
              <el-table-column label="进度" prop="process">
                <template slot-scope="{ row }">{{
                  PRODUCTPROCESSLIST[row.process]
                }}</template>
              </el-table-column>
              <el-table-column label="完成凭证" prop="certificate">
                <template slot-scope="{ row }">
                  <el-image
                    class="el_img"
                    :src="row.certificate"
                    :preview-src-list="[row.certificate]"
                    v-if="row.certificate"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column label="操作" prop="" width="240" align="center">
                <template slot-scope="{ row }">
                  <div class="links_box">
                    <el-button
                      type="primary"
                      size="mini"
                      v-if="row.process != 2"
                      @click="updateProduct(row, 1, $index)"
                      >处理中</el-button
                    >
                    <el-button
                      type="primary"
                      size="mini"
                      v-if="row.process != 2"
                      @click="updateProduct(row, 2, $index)"
                      >完成</el-button
                    >
                    <el-upload
                      class="upload-demo"
                      :action="UPLOADFILEPATH"
                      :show-file-list="false"
                      :on-success="(e) => onFileSuccess(e, row, $index)"
                    >
                      <el-button type="primary" size="mini">上传凭证</el-button>
                    </el-upload>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <!-- 签约产品 end -->
        </el-tabs>
      </div>
      <div class="follow_record">
        <div class="tags_list_box">
          <div
            class="tag"
            :class="item.className"
            v-for="(item, index) in labelList"
            :key="`label_${index}`"
            @click="chooseLabel(item)"
          >
            {{ item.name }}
          </div>
        </div>
        <el-tabs v-model="followActive">
          <!-- 跟进记录 开始 -->
          <el-tab-pane label="跟进记录" name="1">
            <div class="textarea_box">
              <div class="area_box">
                <el-input
                  type="textarea"
                  class=""
                  :rows="3"
                  :resize="inputResize"
                  v-model="input"
                  placeholder="请输入跟进记录，不超过50个字"
                ></el-input>
              </div>
              <div class="follow_btn">
                <el-button
                  type="primary"
                  size="small"
                  :disabled="!input"
                  @click="saveInfo('follow')"
                  >保存跟进记录</el-button
                >
                <el-button type="primary" size="small" @click="openBookDialog()"
                  >预约跟进</el-button
                >
              </div>
            </div>
            <div class="follow_list">
              <div
                class="cell"
                v-for="(item, index) in selectItem.remarkList"
                :key="index"
              >
                <div class="f_content">
                  <span>{{ item.remark }}</span>
                </div>
                <div class="title">
                  <span class="time">{{ item.createBy }}</span>
                  <span class="time">{{ item.updateDate }}</span>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <!-- 跟进记录 end -->
        </el-tabs>
      </div>
    </div>

    <!-- 标记为第三方产品 开始 -->
    <glsx-dialog
      :show="showDialog"
      title="标记为第三方产品"
      width="30%"
      :appendtobody="true"
      @close="closeDialog()"
    >
      <div class="popup_box">
        <h2 class="h2">确认标记为不符合产品客户？</h2>
        <div class="cell">
          <span class="name">理由：</span>
          <el-input
            type="textarea"
            v-model="remark"
            resize="none"
            rows="5"
            placeholder="请输入标记为不合符产品客户理由，以及客户真实需求"
          ></el-input>
        </div>
      </div>
      <template slot="footer">
        <el-button type="primary" size="small" @click="saveRemark()"
          >确定</el-button
        >
        <el-button type="default" size="small" @click="closeDialog()"
          >取消</el-button
        >
      </template>
    </glsx-dialog>
    <!-- 标记为第三方产品 end -->

    <!-- 添加标签 开始 -->
    <glsx-dialog
      :show="showTagDialog"
      title="选择标签"
      width="30%"
      :appendtobody="true"
      @close="closeTagDialog()"
    >
      <div class="tag_dialog">
        <h2 class="h2">选择客户标签：</h2>
        <div class="tags_list">
          <el-tag
            class="el_tag"
            v-for="(item, index) in tagList"
            :key="index"
            :effect="activeTags(item) ? 'dark' : 'plain'"
            @click="chooseTag(item)"
          >
            {{ item.name }}
          </el-tag>
        </div>
      </div>
      <template slot="footer">
        <el-button type="primary" size="small" @click="saveTags()"
          >确定</el-button
        >
        <el-button type="default" size="small" @click="closeTagDialog()"
          >取消</el-button
        >
      </template>
    </glsx-dialog>
    <!-- 添加标签 end -->

    <!-- 预约跟进 开始 -->
    <!-- <glsx-dialog :show="showBookDialog" title="预约跟进" width="30%" :appendtobody="true" @close="closeBookDialog">
      <follow-book v-if="showBookDialog" :id="selectItem.id" :name="selectItem.name" :phone="selectItem.mobile" @change="onChange"></follow-book>
    </glsx-dialog> -->
    <follow-book
      v-model="showBookDialog"
      :id="selectItem.id"
      :name="selectItem.name"
      :phone="selectItem.mobile"
    ></follow-book>
    <!-- 预约跟进 end -->
  </div>
</template>
<script>
import {
  SAVECUSTOMERFILES,
  updateCustomer,
  UPLOADFILEPATH,
  GETCUSTOMERSTATUS,
  UPDATEPRODUCTPROCESS,
} from "@/api/customer";
import {
  SAVE_THIRD_PARTY,
  GET_ALL_LABEL,
  GET_CUSSTOMER_INFO,
  SAVE_CUSTOMER_LABEL,
  SAVE_CUSTOMER_LOCK,
} from "@/http/customer";
import {
  FOLLOWUPOPTIONSLIST,
  FOLLOWUPOPTIONS,
  PASSOPTIONSLIST,
  EFFECTIVEOPTIONS,
  PRODUCTPROCESSLIST,
} from "@/common/constants";
import moment from "moment";
import {
  showToast,
  deepClone,
  showFollowProcess,
  showModal,
  broadcast,
} from "@/utils/util";
import GlsxDialog from "../Dialog";
import CitySelect from "@/components/city";
import { ADD_CUSTOMER_POOL } from "@/http/customer";
import { MODIFY_CUSTOMER_PROCESS } from "@/http/public";
import FollowBook from "./book";
export default {
  name: "FollowUp",
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    list: {
      type: Array,
      default: function () {
        return [];
      },
    },
    id: {
      type: [String, Number],
      default: "",
    },
  },
  components: {
    GlsxDialog,
    CitySelect,
    FollowBook,
  },
  data() {
    return {
      followActive: "1",
      activeName: "1",
      selectItem: {},
      FOLLOWUPOPTIONSLIST: FOLLOWUPOPTIONSLIST,
      FOLLOWUPOPTIONS: FOLLOWUPOPTIONS,
      PASSOPTIONSLIST: PASSOPTIONSLIST,
      EFFECTIVEOPTIONS: EFFECTIVEOPTIONS,
      fieldList: this.$store.state.myClient.fieldList,
      inputResize: "none",
      UPLOADFILEPATH: UPLOADFILEPATH,
      value1: "",
      input: "",
      statusList: [],
      PRODUCTPROCESSLIST,
      otherFile: [],
      showDialog: false,
      remark: "",
      tagList: [],
      tagCheckList: [],
      showTagDialog: false,
      checkList: [],
      showFollowProcess: (str) => showFollowProcess(str),
      showBookDialog: false,
      labelList: [
        { name: "空号", id: 1, className: "" },
        { name: "未接", id: 2, className: "tag_red" },
        { name: "听挂", id: 3, className: "" },
        { name: "拒接", id: 4, className: "tag_red" },
        { name: "关停机", id: 5, className: "tag_blue" },
        { name: "不需要", id: 6, className: "tag_blue2" },
        { name: "已加微信", id: 7, className: "tag_green" },
      ],
    };
  },
  mounted() {
    let o = this.data;
    console.log(o.otherFile);
    // o.progress = o.progress ? o.progress.toString() : "";
    // this.selectItem = o;
    //this.initCustomer(o);
    this.getInfo(o);
    // if (o.otherFile) {
    //   let m = o.otherFile.split(",");
    //   let arr = [];
    //   m.map((k) => {
    //     arr.push({ name: k, url: k });
    //   });
    //   this.otherFile = arr;
    // }
    this.getStatus();
    this.getLabels();
    // if (o.label) {
    this.getTags(o.label);
    // }
  },
  methods: {
    // 是否禁用去签约按钮
    disabledSign() {
      let o = this.selectItem;
      if (
        !o.idcardFront ||
        !o.idcardBack ||
        !o.authorizeFile ||
        !o.authorizeFile
      ) {
        return true;
      }
      return false;
    },

    // 去签约
    goSign(type) {
      let o = this.selectItem;
      let oParams = {
        name: o.name,
        mobile: o.mobile,
        id: o.id,
        type: type || 0,
      };
      console.log(oParams);
      // this.$router.push({
      //   name: "addContract",
      //   query: oParams,
      // });
      // this.$emit("change", true);
      broadcast("look.user.sign", oParams);
    },

    // 上传其他资料
    onFileSucess(res, file, fileList) {
      if (res.code != 200) {
        return false;
      }
      let list = this.otherFile || [];
      list.push({ name: res.data, url: res.data });

      let arr = [];
      list.map((k) => {
        arr.push(k.url);
      });
      this.saveFiles("otherFile", arr.toString());
    },

    // 监听文件上传成功
    onSuccess(res, id) {
      if (res.code == 200) {
        this.$set(this.selectItem, id, res.data);
        this.saveFiles(id, res.data);
      }
    },

    // 保存文件资料
    saveFiles(id, url) {
      if (!id || !url) {
        return false;
      }
      let oParams = {};
      oParams.id = this.selectItem.id;
      oParams[id] = url;
      SAVECUSTOMERFILES(oParams);
    },

    // 保存数据
    saveInfo(type) {
      let _this = this;
      // 编辑客户
      const { progress, id, level, remark, call, fit, name, city, sex } =
        this.selectItem;
      const form = { progress, id, level, remark, call, fit, name, city, sex };

      if (this.value1) {
        // 预约上门时间
        form.appointmentDate = this.value1;
      }
      for (const key in this.selectItem) {
        if (Object.hasOwnProperty.call(this.selectItem, key)) {
          if (key.indexOf("field") > -1) {
            form[key] = this.selectItem[key];
          }
        }
      }
      if (this.input) {
        form.customerRemark = { remark: this.input };
      }

      let arr = [];
      this.checkList.map((k) => {
        arr.push(k.name);
      });
      form.label = arr.toString();
      updateCustomer(form)
        .then((res) => {
          //this.$refs.params.search();
          this.$message.success(res.message);
          if (type == "follow") {
            this.insertInfo(res.data);
            return false;
          }

          if (type == "tags") {
            this.closeTagDialog();
            return false;
          }

          _this.$emit("change", false);
          broadcast("update.success");
        })
        .catch((error) => {
          _this.$emit("change");
        });
    },

    // 获取状态
    getStatus() {
      GETCUSTOMERSTATUS().then((res) => {
        let list = res.data || [];
        list.map((k) => {
          k.id = Number(k.status);
          return k;
        });
        this.statusList = list;
      });
    },

    // 插入跟进信息
    insertInfo(str) {
      let list = this.selectItem.remarkList;
      let o = {};
      o.createBy = str;
      o.updateDate = moment().format("YYYY-MM-DD HH:mm:ss");
      o.remark = this.input;
      list.unshift(o);
      this.$set(this.selectItem, "remarkList", list);
      this.input = "";
      broadcast("update.success");
    },

    // 更新产品状态
    updateProduct(row, id, idx) {
      let _this = this;
      let oParams = {};
      oParams.id = row.id;
      oParams.process = id || row.process;
      oParams.certificate = row.certificate;
      oParams.remark = row.remark;
      UPDATEPRODUCTPROCESS(oParams).then((res) => {
        if (res.code == 200 && id) {
          showToast({
            message: "操作成功",
            type: "success",
          });
          row.process = id;
          _this.$set(this.selectItem, idx, row);
          broadcast("update.success");
        }
      });
    },

    // 监听文件上传成功
    onFileSuccess(e, row, idx) {
      if (e.code != 200) {
        return false;
      }
      showToast({
        message: "上传成功",
        type: "success",
      });
      row.certificate = e.data;
      this.$set(this.selectItem, idx, row);
      this.updateProduct(row);
    },

    // 打开弹框
    openDialog() {
      this.showDialog = true;
    },

    // 关闭弹框
    closeDialog() {
      this.showDialog = false;
      this.remark = "";
    },

    // 保存数据
    saveRemark() {
      if (!this.remark) {
        showToast({
          message: "请输入理由",
        });
        return false;
      }

      let oParams = {};
      oParams.id = this.selectItem.id;
      oParams.remark = this.remark;
      SAVE_THIRD_PARTY(oParams).then((res) => {
        if (res.code == 200) {
          showToast({
            message: "操作成功",
            type: "success",
          });
          this.closeDialog();
          broadcast("update.success");
        }
      });
    },

    // 展示标签
    getTags(str) {
      let list = [];
      if (!str) {
        this.checkList = list;
        return false;
      }
      let _this = this;
      let arr = str.split(",");

      arr.map((k) => {
        list.push({ name: k, id: Math.random() });
      });
      this.checkList = list;
    },

    // 获取所有标签
    getLabels() {
      GET_ALL_LABEL().then((res) => {
        let list = res.data || [];
        this.tagList = list;
      });
    },

    // 关闭标签弹框
    closeTagDialog() {
      this.showTagDialog = false;
    },

    // 打开标签弹框
    openTagDialog() {
      this.showTagDialog = true;
      this.tagCheckList = deepClone(this.checkList);
    },

    // 添加标签
    saveTags() {
      let _this = this;
      let list = this.tagCheckList;
      if (!list || list.length <= 0) {
        showToast({
          message: "请选择标签!",
        });
        return false;
      }
      let arr = [];
      list.map((k) => {
        arr.push(k.name);
      });
      console.log(arr);
      let oParams = {};
      oParams.id = this.selectItem.id;
      oParams.label = arr.toString();
      SAVE_CUSTOMER_LABEL(oParams).then((res) => {
        if (res.code == 200) {
          showToast({
            message: "操作成功",
            type: "success",
          });
          _this.closeTagDialog();
          _this.$set(_this.selectItem, "labels", arr.toString());
          _this.checkList = deepClone(_this.tagCheckList);
          broadcast("update.success");
        }
      });
    },

    // 判断是否选中标签
    activeTags(item) {
      let list = this.tagCheckList;
      let idx = list.findIndex((k) => k.name == item.name);
      if (idx >= 0) {
        return true;
      } else {
        return false;
      }
    },

    // 选中标签
    chooseTag(item) {
      let list = deepClone(this.tagCheckList);
      let idx = list.findIndex((k) => k.name == item.name);
      if (idx >= 0) {
        list = list.filter((k) => k.name != item.name);
      } else {
        list.push(item);
      }
      console.log(this.checkList);
      this.tagCheckList = list;
    },

    // 初始化图片
    initCustomer(row) {
      console.log(row);
      let arr = [];
      if (row && row.otherFile) {
        let m = row.otherFile.split(",");
        m.map((k) => {
          arr.push({ name: k, url: k });
        });
        this.otherFile = arr;
      }
      row.progress = row.progress ? row.progress.toString() : "";

      // if (row.label) {
      this.getTags(row.label);
      // }
      this.selectItem = row;
    },

    // 查看上一个客户
    lookPrevCustomer() {
      let row = this.selectItem;
      let list = this.list;
      let idx = list.findIndex((k) => k.id == row.id);
      console.log(idx);
      if (idx == 0) {
        showToast({
          message: "已是第一个客户",
        });
        return false;
      }
      let o = list[idx - 1];
      this.getInfo(o);
    },

    // 查看下一个客户
    lookNextCustomer() {
      let row = this.selectItem;
      let list = this.list;
      let idx = list.findIndex((k) => k.id == row.id);
      console.log(idx);
      if (idx == list.length - 1) {
        showToast({
          message: "已是最后一个客户",
        });
        return false;
      }
      let o = list[idx + 1];
      this.getInfo(o);
    },

    // 判断用户是否为第一个或者最后一个
    isFirstCustomer() {
      let row = this.selectItem;
      let list = this.list;
      let idx = list.findIndex((k) => k.id == row.id);
      if (idx == 0) {
        return true;
      }
      return false;
    },

    // 判断用户是否为最后一个
    isLastCustomer() {
      let row = this.selectItem;
      let list = this.list;
      let idx = list.findIndex((k) => k.id == row.id);
      if (idx == list.length - 1) {
        return true;
      }
      return false;
    },

    // 加入公共池
    joininPublicPool() {
      let _this = this;
      let row = this.selectItem;

      showModal({
        message: "确认加入公共池?",
        showCancelButton: true,
        success: function () {
          ADD_CUSTOMER_POOL({ idList: [row.id] }).then((res) => {
            if (res.code == 200) {
              showToast({
                message: res.message,
                type: "success",
              });
              //_this.$refs.params.search();
              broadcast("update.success");
            }
          });
        },
      });
    },

    // 获取客户详情
    getInfo(row) {
      GET_CUSSTOMER_INFO({ id: row.id }).then((res) => {
        let obj = res.data || {};
        console.log(obj);
        this.initCustomer(obj);
      });
    },

    // 进件
    goFollow(row) {
      console.log(row);
      broadcast("look.user.into", row);
    },

    // 修改用户状态
    editProgress(row) {
      let _this = this;
      let o = this.data;
      let n = this.selectItem;
      console.log(n.progress);
      console.log(row);
      // if (row.status <= n.progress) {
      //   return false;
      // }
      showModal({
        message: `确认修改状态为：${row.desc}?`,
        showCancelButton: true,
        type: "warning",
        success: function () {
          let oParams = {};
          oParams.id = o.id;
          oParams.progress = row.status;
          MODIFY_CUSTOMER_PROCESS(oParams).then((res) => {
            if (res.code == 200) {
              showToast({
                message: "修改成功",
                type: "success",
              });
              _this.$set(_this.selectItem, "progress", Number(row.status));
            }
          });
        },
      });
    },

    // 打开预约跟进弹框
    openBookDialog() {
      this.showBookDialog = true;
      console.log(this.selectItem);
    },

    // 关闭预约跟进弹框
    closeBookDialog() {
      this.showBookDialog = false;
    },

    // 锁定客户
    lockUser(row) {
      let _this = this;
      console.log(row);
      let msg = "锁定为重要客户,重点跟进,一定时间内其他人无法转移";
      let params = {};
      params.id = row.id;
      if (row.lock == 1) {
        params.lock = 0;
        msg = "确定取消锁定改客户吗？";
      } else {
        params.lock = 1;
        msg = "锁定为重要客户,重点跟进,一定时间内其他人无法转移";
      }
      showModal({
        message: msg,
        showCancelButton: true,
        type: "warning",
        success: function () {
          SAVE_CUSTOMER_LOCK(params).then((res) => {
            if (res.code == 200) {
              showToast({
                message: "操作成功",
                type: "success",
              });
              _this.$set(_this.selectItem, "lock", params.lock);
            }
          });
        },
      });
    },

    // 选择跟进标签
    chooseLabel(row){
      this.input = row.name;
    }

  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/followup.scss";
</style>